<%@ page import="core.Config" %>
<%@ include file="header.tpl.jsp"%>

<style type="text/css">
@import url('css/register.css');
</style>

<script type="text/javascript">
var Config = {
	messageTimeout:<%=Config.messageTimeout%>,
	usernameMinLength:<%=Config.usernameMinLength%>,
	usernameMaxLength:<%=Config.usernameMaxLength%>,
	emailMaxLength:<%=Config.emailMaxLength%>,
	passwordMinLength:<%=Config.passwordMinLength%>,
	passwordMaxLength:<%=Config.passwordMaxLength%>
};
</script>
<script type="text/javascript" src="js/jquery.complexify.js"></script>
<script type="text/javascript" src="js/register.js"></script>

<form id="reg_log" action="Register" method="post">   
	<h1>Register your <strong>+ Quiz</strong> account!</h1>
    <div class="formrow">
    	<label for="login_username">User Name</label> 
    	<input type="text" name="username" id="register_username" class="field required" title="Please provide your username" maxlength="<%=Config.usernameMaxLength%>" />
    </div>
        
    <div class="formrow">
    	<label for="register_email">Email</label>
    	<input type="text" name="email" id="register_email" class="field required" title="Email is required" />
    </div>			

    <div class="formrow">
    	<label for="register_password">Password</label>
    	<input type="password" name="password" id="register_password" class="field required" title="Password is required" />
    </div>			

    <div class="formrow">
    	<label for="register_confirm_password">Confirm Password</label>
    	<input type="password" name="confirm_password" id="register_confirm_password" class="field required" title="Confirm the Password" />
    </div>
    
    <div class="password_strength">
	    <div id="progressbar"><div id="progress"></div></div>
		<div id="status">
			<div id="complexity">0%</div>
			<div id="complexityLabel">Password Complexity</div>
		</div>
	</div>
        			
    <div class="submit">
        <button type="submit">Register</button>   
    </div>
</form>

<script type="text/javascript">
$(function(){
	$("#register_password").complexify({username:'#register_username'}, function (level, complexity) {
		$('#progress').css({'width':complexity + '%'}).attr('class', 'progressbar' + level);
		$('#complexity').html(Math.round(complexity) + '%');
	});
});
</script>

<%@ include file="footer.tpl.jsp"%>